$.ajax({
    type: 'get',
    url: '/users',
    success (res) {
        // console.log(res);
        var html = template('userTpl', {data : res });
        // console.log(html);
        $('#userBox').html(html);
    }
})

$('#userForm').on('submit', function () {
    var formData = $(this).serialize();
    $.ajax({
        type: 'post',
        url: '/users',
        data: formData,
        success (res) {
            // console.log(res);
            location.reload()
        }
    })
    // console.log(formData);
    return false;
    
})

$('#modifyBox').on('change', '#avatar', function () {
    var fd = new FormData();
    fd.append('avatar', this.files[0]);
    $. ajax({
        type: 'post',
        url: '/upload',
        processData: false,
        contentType: false,
        data: fd,
        success (res) {
            // console.log(res);
            $('#hiddenImg').val(res[0].avatar);
            $('#preview').attr('src', res[0].avatar)
        }
    })
})

$('#userBox').on('click','.edit', function (){
    var id = $(this).attr('data-id');
    console.log(id);
    $.ajax({
        type : 'get',
        url: '/users/' + id,
        success : function(res) {
            console.log(res);
            var html = template('modifyTpl', res);
            console.log(html);
            $('#modifyBox').html(html);
        }
    })  
})

//用委托事件给修改表单添加时间
$('#modifyBox').on('submit', '#modifyForm' , function () {
    //jq当中自动搜集表单数据
    console.log($(this).serialize());
    var id = $(this).attr('data-id');
    $.ajax({
        type:'put',
        url: '/users/' + id,
        data: $(this).serialize(),
        success (res) {
            location.reload()
        }
    })
    return false;
})

//删除功能事件委托
$('#userBox').on('click', '.delete', function (){
    if (confirm('确定要删除吗？')){
        var id = $(this).attr('data-id');
        $.ajax({
            type: 'delete',
            url: '/users/' + id,
            success (res) {
                location.reload();
            }
        })
    }
})

//批量删除功能的实现
$('#checkAll').on('change', function () {
    var bool = $(this).prop('checked');
   
    
    //找到 tbody 下面所有的 checkbox, 给他们添加 checked效果
    var checkList = $('#userBox input[type="checkbox"]');
    console.log(checkList);
    
    checkList.prop('checked', bool);
    if (bool == true) {
        $('#deleteAll').show();
    } else {
        $('#deleteAll').hide();
    }

})

$('#userBox').on('change', 'input[type="checkbox"]' , function () {
    if($('#userBox input[type="checkbox"]').length == $('#userBox input[type="checkbox"]:checked').length) {
        $('#checkAll').prop('checked', true);
    }else {
        $('#checkAll').prop('checked', false);
    }
    if ($('#userBox input[type="checkbox"]:checked').length > 0) {
        $('#deleteAll').show();
    } else {
        $('#deleteAll').hide();

    }
})

$('#deleteAll').on('click', function () {
    if (confirm('你确定要删除吗？')) {
        var checkList = $('#userBox input[type="checkbox"]:checked');  
        var str = '';
        checkList.each(function (index, item) {
            str += $(item).attr('data-id') + '-';
        })
        console.log(str);
        str = str.substr(0, str.length - 1);
        
        
        $.ajax({
            type: 'delete',
            url : '/users/' + str,
            success (res) {
                location.reload();
            }
        })
    }  
})

 